<svg style="height:2000px;width:2000px;"
  class="draggable-container"
  xmlns="http://www.w3.org/2000/svg"
  ng-mousedown="mouseDown($event)"
  ng-mousemove="mouseMove($event)"  
  >
  <defs>
    <linearGradient
      spreadMethod="pad"
      y2="0"
      x2="0"
      y1="1"
      x1="0"
      id="nodeBackgroundGradient"
      >
      <stop
        offset="0"
        stop-opacity="0.99609"
        stop-color="#F08C38"
        />
        <stop
        offset="0.63934"
        stop-opacity="0.99219"
        stop-color="#FFFFFF"
        />
    </linearGradient>
  </defs>
  <g
    ng-repeat="node in chart.nodes"
    ng-mousedown="nodeMouseDown($event, node)"
    ng-attr-transform="translate({{node.x()}}, {{node.y()}})"
    >

      <rect
              ng-attr-class="{{node.selected() && 'selected-node-rect' || (node == mouseOverNode && 'mouseover-node-rect' || 'node-rect')}}"
              x="0"
              y="0"
              ng-attr-width="{{node.width()}}"
              ng-attr-height="{{node.height()}}"
              fill="#FFFFFF"
              >

      </rect>

      <rect fill="#3483BA"  x="0"
            y="0"
            ng-attr-width="{{node.width()}}" height="35"></rect>
      <text  fill="white"
             style="font-weight:bold;font-size:16px;"
              ng-attr-x="{{node.width()/2}}"
              y="20"
              text-anchor="middle"
              alignment-baseline="middle"
              >
          {{node.name()}}
      </text>
      <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ng-attr-x="{{node.width() - 24}}" y="0" ng-click="chart.deleteSelected()">
          <path d="M0 0h24v24H0z" fill="#3483BA"/>
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      </svg>

      <svg fill="#3483BA" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ng-hide="node.data.nodeAttributes.hasAllSelected() == false"
           ng-click="node.data.nodeAttributes.deselectAll()" y="43" x="30">
          <path d="M0 0h24v24H0z" fill="#FFFFFF"/>
          <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
      </svg>
      <svg fill="#3483BA" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ng-hide="node.data.nodeAttributes.hasAllSelected() == true"
           ng-click="node.data.nodeAttributes.selectAll()" y="43" x="30">
          <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"  />
          <path d="M0 0h14v14H0z" fill="#FFFFFF"  transform="translate(5,5)"/>
      </svg>
      <text  fill="black"
             style="font-weight:bold;font-size:14px;"
             y="60"
             x="60"
              >
         Columns
      </text>

    <g ng-repeat="attribute in node.data.nodeAttributes.attributes" ng-attr-transform="translate(30,{{75+($index*25)}})">
      <title>{{attribute.description}}</title>

      <!-- checked -->
      <svg fill="#3483BA" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ng-hide="attribute.selected == false"  ng-click="node.data.nodeAttributes.deselect(attribute)">
        <path d="M0 0h24v24H0z" fill="#FFFFFF"/>
        <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
      </svg>
      <svg fill="#3483BA" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" ng-hide="attribute.selected ==true" ng-click="node.data.nodeAttributes.select(attribute)">
        <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"  />
        <path d="M0 0h14v14H0z" fill="#FFFFFF"  transform="translate(5,5)"/>
      </svg>

     <text x="30" y="18">
              {{attribute.name}} - <tspan class="hint" style="fill:grey">{{attribute.dataTypeWithPrecisionAndScale}}</tspan>
            </text>
    </g>

    <g
          ng-repeat="connector in node.connectors"
          ng-mousedown="connectorMouseDown($event, node, connector, $index, true)"
          class="connector input-connector"
          >
      <text
              ng-attr-x="{{connector.x()}}"
              ng-attr-y="{{connector.y()}}"
              text-anchor="left"
              alignment-baseline="middle"
              >
          {{connector.name()}}
      </text>
<!--        <polyline  ng-attr-class="{{connector == mouseOverConnector && 'mouseover-connector-circle' || 'connector-circle'}}" ng-attr-points="{{connector.trianglePoints()}}"></polyline> -->

     <circle
              ng-attr-class="{{connector == mouseOverConnector && 'mouseover-connector-circle' || 'connector-circle'}}"
              ng-attr-r="{{connectorSize}}"
              ng-attr-cx="{{connector.x()}}"
              ng-attr-cy="{{connector.y()}}"
              />

  </g>
  </g>


  <g>
    <g
      ng-repeat="connection in chart.connections"
      class="connection"
      ng-mousedown="connectionMouseDown($event, connection)"
      >
        <path
          ng-attr-class="{{connection.selected() && 'selected-connection-line' || (connection == mouseOverConnection && 'mouseover-connection-line' || 'connection-line')}}"
          ng-attr-d="M {{connection.sourceCoordX()}}, {{connection.sourceCoordY()}}
                     C {{connection.sourceTangentX()}}, {{connection.sourceTangentY()}}
                       {{connection.destTangentX()}}, {{connection.destTangentY()}}
                       {{connection.destCoordX()}}, {{connection.destCoordY()}}"
          >
        </path>

      <g  ng-attr-transform="translate({{connection.middleX()}},{{connection.middleY()}})"  ng-click="connection.edit()">
          <circle stroke="#3483BA" stroke-width="2" fill="#FFFFFF"
                   r="15"
                   cx="12"
                   cy="12"
                  >
          </circle>
      <svg fill="#3483BA" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"  >
        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
      </svg>
      </g>


      <text
            ng-attr-class="{{connection.selected() && 'selected-connection-name' || (connection == mouseOverConnection && 'mouseover-connection-name' || 'connection-name')}}"
        ng-attr-x="{{connection.middleX()}}"
        ng-attr-y="{{connection.middleY()}}"
        text-anchor="middle"
        alignment-baseline="middle"
        >{{connection.name()}}</text>

        <circle
            ng-attr-class="{{connection.selected() && 'selected-connection-endpoint' || (connection == mouseOverConnection && 'mouseover-connection-endpoint' || 'connection-endpoint')}}"
            r="5" 
            ng-attr-cx="{{connection.sourceCoordX()}}" 
            ng-attr-cy="{{connection.sourceCoordY()}}" 
            >
        </circle>

        <circle
            ng-attr-class="{{connection.selected() && 'selected-connection-endpoint' || (connection == mouseOverConnection && 'mouseover-connection-endpoint' || 'connection-endpoint')}}"
            r="5" 
            ng-attr-cx="{{connection.destCoordX()}}" 
            ng-attr-cy="{{connection.destCoordY()}}" 
            >
        </circle>
    </g>
  </g>

  <g
    ng-if="draggingConnection"
    >
    <path
      class="dragging-connection dragging-connection-line"
      ng-attr-d="M {{dragPoint1.x}}, {{dragPoint1.y}}
                 C {{dragTangent1.x}}, {{dragTangent1.y}}
                   {{dragTangent2.x}}, {{dragTangent2.y}}
                   {{dragPoint2.x}}, {{dragPoint2.y}}"
      >
    </path>

    <circle
        class="dragging-connection dragging-connection-endpoint"
        r="4" 
        ng-attr-cx="{{dragPoint1.x}}" 
        ng-attr-cy="{{dragPoint1.y}}" 
        >
    </circle>

    <circle
        class="dragging-connection dragging-connection-endpoint"
        r="4" 
        ng-attr-cx="{{dragPoint2.x}}" 
        ng-attr-cy="{{dragPoint2.y}}" 
        >
    </circle>
  </g>

  <rect
      ng-if="dragSelecting"
      class="drag-selection-rect"
      ng-attr-x="{{dragSelectionRect.x}}"
      ng-attr-y="{{dragSelectionRect.y}}"
      ng-attr-width="{{dragSelectionRect.width}}"
      ng-attr-height="{{dragSelectionRect.height}}"
    >
  </rect>
  
</svg>
